<template>
	<view class="container">
		<view class="room">
			<view class="roomBtn">
				<view class="btn" @click="goOwner">
					<uni-icons custom-prefix="iconfont" type="icon-owner" size="24" color="#2979ff"></uni-icons>
					<view class="name">业主信息</view>
				</view>
				<view class="btn">
					<uni-icons custom-prefix="iconfont" type="icon-open" size="24" color="#2979ff"></uni-icons>
					<view class="name">开门记录</view>
				</view>
				<view class="btn">
					<uni-icons custom-prefix="iconfont" type="icon-rentList" size="24" color="#2979ff"></uni-icons>
					<view class="name">入住记录</view>
				</view>
				<view class="btn">
					<uni-icons custom-prefix="iconfont" type="icon-bill" size="24" color="#2979ff"></uni-icons>
					<view class="name">充值记录</view>
				</view>
			</view>
			<view class="info">
				<view class="infoTitle">
					<view class="name">房间信息</view>
					<view class="btn" @click="editInfo">编辑</view>
				</view>
				<view class="detail">
					<view class="label">
						<view class="name">房间：</view>
						<view class="value">{{ detail.room_address }}</view>
					</view>
					<view class="label">
						<view class="name">分组：</view>
						<view class="value">{{ detail.group_name }}</view>
					</view>
				</view>
			</view>
			<view class="info">
				<view class="infoTitle">
					<view class="name">备注</view>
					<view class="btn" @click="editDesc(detail)">编辑</view>
				</view>
				<view class="desc" v-if="detail.room_desc != ''">{{ detail.room_desc }}</view>
			</view>
			<view class="info">
				<view class="infoTitle">
					<view class="name">视频图片</view>
					<view class="btn" @click="editMedia(detail)">编辑</view>
				</view>
				<view class="media" v-if="video.length > 0 || image.length > 0">
					<uni-row :gutter="20">
						<uni-col :span="8" v-for="item in video" :key="item">
							<view class="videoTop"></view>
							<video :src="item" mode="aspectFill" controls="false" object-fit="fill"></video>
						</uni-col>
						<uni-col :span="8" v-for="item in image" :key="item">
							<image :src="item" mode="aspectFill"></image>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<button type="warn" @click="deleteRoom">删除房间</button>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="编辑房号" :value="detail.room_no" placeholder="请输入锁名称" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			id: null,
			detail: {},
			video: [],
			image: []
		};
	},
	onLoad(e) {
		this.id = e.id;
	},
	onShow() {
		this.getDetail();
	},
	methods: {
		deleteRoom() {
			const _this = this;
			uni.showModal({
				title: '提示',
				content: '确定删除该房间？',
				success: function (res) {
					if (res.confirm) {
						api.roomDel({ room_id: _this.id }).then((data) => {
							if (data.data.is_success) {
								uni.showToast({
									title: '删除成功！'
								});
								setTimeout(() => {
									uni.hideToast();
									uni.navigateBack();
								}, 1000);
							}
						});
					}
				}
			});
		},
		editInfo() {
			if (this.detail.room_type == '1') {
				uni.navigateTo({
					url: '/pages/details/info/room?id=' + this.id
				});
			} else {
				this.$refs.inputDialog.open();
			}
		},
		editDesc(item) {
			uni.navigateTo({
				url: '/pages/details/desc?type=room&id=' + item.id + '&value=' + item.room_desc
			});
		},
		editMedia(item) {
			uni.setStorageSync('video', item.room_video);
			uni.setStorageSync('image', item.room_photo);
			uni.navigateTo({
				url: '/pages/details/info/media?id=' + item.id
			});
		},
		dialogInputConfirm(val) {
			const data = {
				room_id: this.id,
				room_no: val
			};
			uni.showLoading({
				title: '重命名中...'
			});
			api.roomEdit(data).then((res) => {
				if (res.data.is_success) {
					uni.hideLoading();
					uni.showToast({
						title: '重命名成功',
						icon: 'none'
					});
					this.$refs.inputDialog.close();
					this.getDetail();
				}
			});
		},
		goOwner() {
			uni.navigateTo({
				url: '/pages/details/owner?owner=' + this.detail.owner_id + '&room=' + this.id
			});
		},
		getDetail() {
			api.roomDetail({ room_id: this.id }).then((res) => {
				this.detail = res.data.info;
				this.video = res.data.info.room_video == '' ? [] : res.data.info.room_video.split(',');
				this.image = res.data.info.room_photo == '' ? [] : res.data.info.room_photo.split(',');
			});
		}
	}
};
</script>

<style lang="scss">
.roomBtn {
	background: #fff;
	margin-bottom: 20rpx;
	display: flex;
	.btn {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		.name {
			font-size: 28rpx;
		}
	}
}
.info {
	margin-bottom: 20rpx;
	padding: 20rpx;
	background: #fff;
	.infoTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.name {
			font-size: 28rpx;
			font-weight: bold;
		}
		.btn {
			font-size: 26rpx;
			color: $uni-primary;
		}
	}
	.detail {
		margin-top: 20rpx;
		.label {
			display: flex;
			align-items: center;
			line-height: 1.8;
			.name {
				font-size: 28rpx;
				color: $uni-base-color;
			}
			.value {
				font-size: 28rpx;
			}
		}
	}
	.desc {
		margin-top: 20rpx;
		background: $uni-bg-color;
		padding: 10rpx;
		font-size: 28rpx;
		line-height: 42rpx;
		color: $uni-base-color;
	}
	.media {
		margin-top: 20rpx;
		.uni-row {
			width: 100%;
			.uni-col {
				height: 220rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				position: relative;
				.videoTop {
					position: absolute;
					width: 100%;
					height: 220rpx;
					z-index: 2;
				}
				video {
					width: 100%;
					height: 220rpx;
				}
				image {
					width: 100%;
					height: 220rpx;
				}
			}
		}
	}
}
</style>
